<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Blob 对象</title>
</head>
<body>
    <div id="content"></div>
    <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/Blob">资料参考网址1</a>
    <a href="https://blog.csdn.net/weixin_41888813/article/details/83858343">资料参考网址1</a>
    <script>
        /** 
        *   Blob 是包含只读数据的类文件对象
        *   File是基于Blob实现的
        *   
        *   构建 Blob 的三种方法：
        *       1：通过构造函数创建 new Blob(array, options)  （array 是数据序列，可以是任意格式；options 指定放入Blob中的数据类型）
        *       2：在已有的Blob对象上使用slice()切出一个新的Blob对象  blob.slice(start, end, contentType) （这个方法对于大文件上传有效）
        *       3：canvas.toBlob() 能把当前的 canvas 转成一个 Blob 对象
        *
        *   Blob 的属性：
        *       1：Blob.size  Blob对象中数据的大小（字节）
        *       2：Blob.type  Blob对象的数据的MIME类型
        **/

        const blob = new Blob(['hello world'], {type: 'image/jpeg'})
        console.log(blob)
        console.log(blob.size, blob.type)
        readerText(blob)

        const new_blob = blob.slice(0, 5)
        readerText(new_blob)

        function readerText (blob) {
            if (!blob) return
            const reader = new FileReader()
            reader.onload = (res) => {
                console.log(res.target.result)
            }
            reader.readAsText(blob)
        }
    </script>
</body>
</html>